<template>
    <div class="container">
        <div id="allmap" ref="allmap" style="height:500px"></div>
    </div>
</template>
<script src="https://www.google.cn/maps/api/js?language=en&key=AIzaSyBICWcSC4Iosl2raNVBEw7Qt3FmD28d8xE"></script>
<script>
    import {gmapApi} from 'vue2-google-maps'
    export default {
        mounted(){
        var mapData = [{ latitude: 22.5397965915, longitude: 114.0611121534 }];
        //在mounted中执行地图方法，mapData为要展示的数据
        this.$nextTick(function(){
            this.initMap(mapData);
        })
    },
    computed: {
        google: gmapApi
    },
    methods:{
        initMap(mapData) {
            let that = this;
            // 创建google地图
            console.log(2)
            this.maps = new google.maps.Map(document.getElementById("allmap"), {
                zoom: 13,
                //地图中心点，这里我以第一个数据的经纬度来设置中心点
                center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
                disableDefaultUI: false,
                zoomControl: false
            });
            // 设置满足条件的自定义标记图标
            let imageblue = "@/img/map_blue.png";
            let imagered = "@/img/map_red.png";
            let imagegray = "@/img/map_gray.png";
            let infoWindow = new google.maps.InfoWindow();
            // 循环渲染数据
            mapData.map(currData=>{
                // 判断当前图片
                let currImg = "";
                if (currData.line == 0) {
                    currImg = imagegray;
                } else {
                    if (currData.available >= 4) {
                        currImg = imageblue;
                    } else {
                        currImg = imagered;
                    }
                }
                let marker = new google.maps.Marker({
                    position: { lat: currData.latitude, lng: currData.longitude },
                    map: this.maps,
                    title: currData.name,
                    // 此处的icon为标记的自定义图标
                    icon: currImg,
                    animation: google.maps.Animation.DROP
                });

                //多个标记点的点击事件
                (function(marker, currData) {
                    google.maps.event.addListener(marker, "click", function(e) {
                        let currLine =
                                currData.line == 1? '在线': '离线';
                        //设置消息窗口的统一内容
                        infoWindow.setContent(
                                '<div class="content"><h3 style="margin-bottom:5px;font-size:20px;">' +
                                currData.name +
                                '</h3><p style="margin-bottom:5px;font-size:16px;">' +
                                currData.address +
                                '</p></h3><p style="display: flex;align-items:center;margin-bottom:5px;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#4ECC77;"></span><span style="margin-left:5px;color:#4ECC77;">可用电池 ' +
                                +currData.available +
                                '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#FF485C;margin-left:25px;"></span><span style="margin-left:5px;color:#FF485C;">空仓 ' +
                                +currData.empty +
                                '</span></p><p style="color:#333;margin-top:5px;">机柜状态：<span style="color:#000;">' +currLine+
                                '</span></p><p style="color:#333;margin-top:5px;">地理位置：<span style="color:#000;">lat：' +
                                currData.latitude +
                                "；log：" +
                                currData.longitude +
                                "</span></p></div>"
                        );
                        //调用 infoWindow.open
                        infoWindow.open(this.maps, marker);
                    });
                })(marker, currData);
            })
        }
    }
    }
    </script>